<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/details.css">
    <style>

    </style>
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="box">
        <div class="warp">
            <div class="top">
                <ul>
                    <li><a href="a#"><img src="./img/star.jpg" alt="" srcset=""></a></li>
                    <li>收藏</li>
                    <li>|</li>
                    <li>Hi,欢迎来订购!</li>
                    <a href="./register.html">
                        <li class="text">[请登录]</li>
                    </a>
                    <a href="./register.html">
                        <li class="text">[免费注册]</li>
                    </a>
                </ul>
            </div>
            <div class="top-rigth">
                <a href="#">客户服务</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
                <a href="#">网站导航</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
                <a href="#"><img class="top-rigth-go" src="./img/shoppingcart.png" alt="" srcset=""></a>
                <a href="#">我的购物车

                    <input type="text-1" id="text-1" style="width: 35px;color: red;font-weight: bold;font-size: 20px;text-align: center;background-color: rgba(239,239,239);" value="0" />
                    件</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
            </div>
        </div>
    </div>
    <!-- 顶部导航条end -->

    <!-- 顶部图片 -->
    <div class="warp">
        <div class="warp-manbu">
            <a href="#" class="manbu-left"><img src="./img/漫步时代广场-左.jpg" alt="" srcset=""></a>
            <a href="#" class="manbu-rigth"><img src="./img-layout/banner.jpg" alt="" srcset=""></a>
        </div>
    </div>
    <!-- 顶部图片end -->

    <!-- 导航条 -->
    <div class="daohang">
        <div class="warp">
            <div class="daohang-text">
                <ul class="nav">
                    <a href="./index.html">
                        <li>首页</li>
                    </a>
                    <a href="">
                        <li>最新上架</li>
                    </a>
                    <a href="">
                        <li>品牌活动</li>
                    </a>
                    <a href="">
                        <li>原厂直供</li>
                    </a>
                    <a href="">
                        <li>团购</li>
                    </a>
                    <a href="./details.html">
                        <li>限时抢购</li>
                    </a>
                    <a href="./layout.html">
                        <li>促销打折</li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航条end -->
    <div class="warp">
        <div class="center-2">
            <div class="center-left">
                <ul>
                    <li class="nn"><a href="#">女装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">上衣<span>></span></a>

                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">下装<span>></span></a>

                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">连衣裙<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">内衣<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">男装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">T恤<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">短裤<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">衬衫<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">童装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">上衣<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">裤子<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">运动</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">运动鞋<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">跑步鞋<span>></span></a>
                    </li>
                </ul>
            </div>

            <!-- 详情 -->
            <div class="xq-rigth">
                <div class="xq">
                    <p>商品详情</p>

                </div>

                <!-- 热门推荐悬浮窗 -->
                <div class="rmtj-float">
                    <div class="rmtj">
                        <p style="margin: 0 10px;">热门推荐</p>
                    </div>
                    <div class="display">
                        <div class="rmtj-1">
                            <img src="./shopshow/s1.jpg" alt="" srcset="">
                            <h3>￥89</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s2.jpg" alt="" srcset="">
                            <h3>￥809</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s3.jpg" alt="" srcset="">
                            <h3>￥189</h3>
                        </div>
                    </div>
                    <div class="display">
                        <div class="rmtj-1">
                            <img src="./shopshow/s4.jpg" alt="" srcset="">
                            <h3>￥889</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s5.jpg" alt="" srcset="">
                            <h3>￥89</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s6.jpg" alt="" srcset="">
                            <h3>￥789</h3>
                        </div>
                    </div>
                    <div class="display">
                        <div class="rmtj-1">
                            <img src="./shopshow/s7.jpg" alt="" srcset="">
                            <h3>￥489</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s8.jpg" alt="" srcset="">
                            <h3>￥189</h3>
                        </div>
                        <div class="rmtj-1">
                            <img src="./shopshow/s9.jpg" alt="" srcset="">
                            <h3>￥289</h3>
                        </div>
                    </div>
                </div>
                <!-- 热门推荐悬浮窗 end-->

                <div class="gt">
                    <img src="./register/dd1.jpg" style="float: left; width: 500px;margin-top: 10px;" alt="" srcset="">
                </div>
                <div class="xq-rigth-txt">
                    <h2>冬季新款牛仔外套女中长款加厚</h2>
                    <h2>冬季新款牛仔外套女中长款加厚风衣</h2>
                    <div class="jiage">
                        <div class="jiage-1">
                            <p>价格</p>
                            <p>淘宝价</p>
                        </div>
                        <div class="jiage-2">
                            <p>￥448.00</p>
                            <p>￥198.00</p>
                            <div class="qg">
                                <p style="text-decoration: none; color: #fff;">限时抢购价,抢购</p>
                            </div>
                        </div>
                    </div>
                    <div class="jiage-3">
                        <p>淘金币可抵0.73元</p>
                    </div>
                    <div class="jiage-4">
                        <a href="">
                            <p style="width: 60px;margin-top: 5px;">配送</p>
                        </a>
                        <a href="">
                            <p style="margin: 0 0 0 40px; width: 70px; margin-top: 5px;">江苏至</p>
                        </a>
                            
                        <!-- <p> 山东青岛
                                <img src="./register/uew_icon.png" alt="" srcset="">
                            </p> -->
                        <select>
                            <option value="volvo">-请选择省份-</option>
                            <option value="saab">无锡</option>
                            <option value="opel">徐州</option>
                            <option value="audi">常州</option>
                        </select>

                        <a href="">
                            <p style="font-size: 15px; color: rgba(246,74,1); margin-top: 5px;">快递￥10.00
                                <!-- <img src="./register/uew_icon.png" alt="" srcset=""> -->
                            </p>
                        </a>
                    </div>
                    <div class="cm">
                        <div class="cm-1">
                            <p>尺码</p>
                        </div>
                        <div class="cm-rigth">
                            <ul>
                                <li>M</li>
                                <li>L</li>
                                <li>XL</li>
                                <li>2XL</li>
                            </ul>
                        </div>
                    </div>
                    <div class="cm">
                        <div class="cm-1">
                            <p>颜色分类</p>
                        </div>
                        <div class="cm-rigth">
                            <img src="./register/detail3.jpg" alt="" srcset="">
                            <img src="./register/detail5.jpg" alt="" srcset="">
                        </div>
                    </div>
                    <div class="cm">
                        <div class="cm-1">
                            <p>数量</p>
                        </div>
                        <div class="cm-rigth heigth">
                            <ul class="ttt">
                                <li><button id="plus">+</button></li>
                                <li><input type="text" id="text" value="0" /></li>
                                <li><button id="subtract">-</button></li>
                                <li><input type="text" id="money" value="100" style="color: red;" />
                                    <p style="color: red;">需要实付¥</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="lkgm">立刻购买</div>
                    <div class="lkgm-2"><img src="./register/shoppingcart.png" alt="" srcset="">加入购物车</div>
                </div>
                <div class="xq-min-img">
                    <ul>
                        <li>
                            <img src="./register/dd1.jpg" alt="" srcset="">
                        </li>
                        <li>
                            <img src="./register/dd2.jpg" alt="" srcset="">
                        </li>
                        <li>
                            <img src="./register/dd3.jpg" alt="" srcset="">
                        </li>
                        <li>
                            <img src="./register/dd4.jpg" alt="" srcset="">
                        </li>
                        <li>
                            <img src="./register/dd5.jpg" alt="" srcset="">
                        </li>
                    </ul>
                </div>
                <script>

                </script>
                <!-- 切换导航栏 -->
                <div class="tab">
                    <ul class="tab-items">
                        <li class="tab-item active">商品详情</li>
                        <li class="tab-item">商品评价</li>
                        <li class="tab-item">成交记录</li>
                    </ul>
                    <div class="tab-contents">
                        <div class="tab-content active">
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="hz-1">
                                <ul>
                                    <li>服装版型:修身</li>
                                    <li>衣长:中长歌</li>
                                    <li>模型:戴帽</li>
                                    <li>成分含量:81%(含)-90%(含)</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 切换导航栏end -->

                <!-- 图片详细展示 -->
                <div class="xq-img">
                    <img src="./register/detail1.jpg" alt="" srcset="">
                    <img src="./register/detail2.jpg" alt="" srcset="">
                    <img src="./register/detail3.jpg" alt="" srcset="">
                    <img src="./register/detail4.jpg" alt="" srcset="">
                    <img src="./register/detail5.jpg" alt="" srcset="">
                    <img src="./register/detail6.jpg" alt="" srcset="">
                    <img src="./register/pinglun.jpg" alt="" srcset="">
                </div>
                <!-- 图片详细展示end -->
            </div>
            <!-- 详情 end-->

        </div>
    </div>



    <div class="dibu">
        <p class="dibu-text"><a href="#">Copyright 2015-2020 Q- Walking Fashion E&S漫步时尚广场(QST教育)版权所有</a></p>
        <p><a href="#">中国青岛高新区河东路8888号青软教育集团咨询热线: 400- 658 0166400- 658 1022</a></p>
        <img src="./img/foot_pic.jpg" alt="" srcset="">
    </div>


    <script>
        //图片切换
        //大图
        let gtImg = document.querySelector(".gt>img");
        console.log(gtImg);
        //小缩略图
        let images = document.querySelectorAll(".xq-min-img>ul>li>img");
        console.log(images);
        images.forEach(image => {
            //onclick 鼠标单击
            image.onclick = function () {
                // 点击当前小图img，大图img的src与小图一致
                image.onclick = function () {
                    //this.src 字符串
                    gtImg.src = this.src;
                }
            }
        })
        //图片切换end


        //按钮加减
        window.onload = function () {
            var plus = document.getElementById("plus");
            var i = document.getElementById("text").value;
            var i = document.getElementById("text-1").value;
            var subtract = document.getElementById("subtract");
            var money = document.getElementById("money").value;
            var shuzi = document.querySelector('.top-rigth>a:nth-child(6)')

            console.log(shuzi);
            plus.onclick = function () {
                i++;
                document.getElementById("text").value = i;
                document.getElementById("text-1").value = i;
                document.getElementById("money").value = i * money;
                shuzi = i
                console.log(shuzi);

            }
            subtract.onclick = function () {
                if (i > 0) {
                    i--;
                    document.getElementById("text").value = i;
                    document.getElementById("text-1").value = i;
                    document.getElementById("money").value = i * money;
                } else {
                    i = 0;
                    document.getElementById("text").value = i;
                    document.getElementById("money").value = i * money;
                }
            }
        }
        //按钮加减end


        // 表格切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener("click", e => {
                let tabItem = e.target.closest('.tab-item')
                console.log(tabItem);
                if (tabItem) {
                    let index = 0
                    let tabItems = tabItem.closest('.tab-items')
                    let tabContents = tabItems.closest('.tab').querySelector('.tab-contents')

                    tabItems.querySelectorAll('.tab-item').forEach((item, itemIndex) => {
                        if (tabItem === item) {
                            index = itemIndex
                            item.classList.add('active')
                        } else {
                            item.classList.remove('active')
                        }
                    });
                    tabContents.querySelectorAll('.tab-content').forEach((item, itemIndex) => {
                        if (index === itemIndex) {
                            item.classList.add('active')
                        } else {
                            item.classList.remove('active')
                        }
                    });
                }
            });
        });
        // 表格切换end
    </script>
</body>

</html>